<template>
	<view class="userRating marin25">
		<view class="userRating-all" v-for=" (item,index) in plLists" :key="index">


			<view class="rating-content">
				<view class="rating-user">
					<image style="border-radius: 50%;" :src="baseOssUrl2 + item.tx " mode=""></image>
					<view class="ratcont">
						{{item.username}}
						<view class="ratime">
							{{item.cjTime}}发表
						</view>
					</view>
				</view>
				<view class="rating-score">
					<fui-rate :score=item.xj :size="32" disabled=""></fui-rate>
				</view>
			</view>
			<!-- 评论文字 -->
			<view class="copywriting">
				{{item.text}}
			</view>
			<view class="rating-imgs"> 
				<image :src="baseOssUrl2 +item1" mode="" v-for="(item1,index1) in item.images" :key='index1'  @click="showGallery(item.images,index1)"></image>
				<fui-gallery :urls="ratingImgs" :show="bigImgshow" @hide="hideGallery"></fui-gallery>
			</view>
		</view>
		<view class="no-box" v-if="plLists.length == 0">
			暂无评价
		</view>
	</view>
</template>

<script>
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	export default {
		data() {
			return {
				id:'',
				plLists:[], //评价列表
				pltotal:'',
				baseOssUrl: baseOssUrl,
				baseOssUrl2:baseOssUrl2,
				ratingImgs: [],
				urls: [{
							src: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/pic1.png',
							descr: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
						}, {
							src: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/pic1.png'
						}, {
							src: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/pic1.png'
						}],
						bigImgshow: false
			}
		},
		onLoad(e) {
			this.id = e.id
			this.plList()
		},
		methods: {
			// 评价列表
			plList() {
				this.$http.get(this.$httpApi.plList, {
					data: {
						 mId: this.id
					}
				}).then(res => {
					if (res.code == 0) {
						this.plLists = res.page
						this.plLists.forEach(item=>{
							if(item.images) {
								console.log(item,'itemitemitem')
								var arr = [];
								arr  = item.images.split(',')
								console.log(arr)
								item.images = arr
							}
							
						})
						this.pltotal = res.total
					}
				})
			},
			rateChange(e) {
				console.log(e)
			},
			showGallery(e,index) {
				var list = e
				var lists = []
				list.forEach(item=>{
					lists.push(this.baseOssUrl2 + item)
					console.log(item,'itemitemitemitem')
				})
				setTimeout(res=>{
					console.log(lists,'listslistslists')
					wx.previewImage({
						urls:  lists, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: index, // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				},500)
				console.log(this.ratingImgs,'this.ratingImgs')
			},
			hideGallery() {
				this.bigImgshow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.userRating {
		height: 100%;

		.userRating-all {
			background: #FFFFFF;
			margin: 24rpx 0;
			padding: 30rpx;
			border-radius: 16rpx;

			.rating-content {

				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.rating-user {
					display: flex;
					align-items: center; 
					.ratcont {
						margin-left: 20rpx;
						font-size: 26rpx;
						font-weight: bold; 
						.ratime {
							color: #969696;
							font-weight: 400;
						}
					}
				}
				
			}

			.copywriting {
				font-size: 28rpx;
				margin: 10rpx 0 24rpx 0;
			}

			.rating-imgs {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				image {
					width: 202rpx;
					height: 200rpx;
					margin-right: 12rpx;
					margin-bottom: 12rpx;
				}
			}

		}
	}
	.no-box  {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 600rpx;
	}
</style>
